<template>
	<view>
		<!-- 邀请二维码 -->
		<view v-if="!friendHomeMode" class="share-kf-wrap" @click="handleOpenInvitePopup">
			<image class="sha-icon" src="/static/img/share.png" mode="aspectFill"></image>
		</view>

		<!-- 礼物盒子 -->
		<view v-if="!friendHomeMode && userInfo.newbie !== 'Y'" class="gift-box" @click="handleOpenGiftPopup">{{ $t('gift.gift', 'Gift') }}</view>

		<!-- 邀请弹窗 -->
		<uni-popup ref="invitePopup" type="center">
			<view class="invite-popup-box model-content">
				<image class="close-img" src="/static/img/close.png" mode="aspectFill" @click="closeInvitePopup" />
				<view class="title">{{ $t('gift.invite_friends', 'Invite friends') }}</view>
				<view class="contents">
					<view class="text">{{ $t('gift.your_invitation_code', 'your invitation code') }}</view>
					<view class="code-text">{{ userInfo.recommend_code || '' }}</view>
					<view class="code-box flex-center">
						<image class="qr-code" src="/static/img/qrcode.png" mode="aspectFill"></image>
					</view>
					<view class="copy-btn" @click="handleCopyLink">{{ $t('gift.copy_link', 'Copy the link') }}</view>
				</view>
			</view>
		</uni-popup>

		<!-- 礼物弹窗 -->
		<uni-popup ref="giftPopup" type="center">
			<view class="gift-popup-box">
				<image class="title" src="/static/img/gift-title.png" mode="aspectFill"></image>
				<view class="contents">
					<view class="gift-data">
						<view v-for="(item, index) in giftData" :key="index" class="gift-box-item" :class="{'active': index === 0}">
							<image class="gift-img" :src="projectConfig.imgPrefix + item.seedImage" mode="aspectFill"
								style="width: 32px;">
							</image>
							<view class="num">X{{ item.num }}</view>
						</view>
						<!-- <view class="gift-box-item">
							<image class="gift-img" src="/static/img/kettle.png" mode="aspectFill" style="width: 40px;">
							</image>
							<view class="num">X3</view>
						</view>
						<view class="gift-box-item">
							<image class="gift-img" src="/static/img/Herbicide.png" mode="aspectFill"
								style="width: 24px;"></image>
							<view class="num">X3</view>
						</view>
						<view class="gift-box-item">
							<image class="gift-img" src="/static/img/Insecticide.png" mode="aspectFill"
								style="width: 24px;"></image>
							<view class="num">X3</view>
						</view>
						<view class="gift-box-item">
							<image class="gift-img" src="/static/img/Fertilizer_Lv1.png" mode="aspectFill"
								style="width: 28px;"></image>
							<view class="num">X3</view>
						</view> -->
					</view>
				</view>
				<view class="gift-btn" @click="handleReceiveGift">{{ $t('gift.receive', 'Receive') }}</view>
				<image class="close" src="/static/img/icon-delete.png" mode="aspectFill" @click="closeGiftPopup" />
			</view>
		</uni-popup>
		<loader />
	</view>
</template>

<script>
import { userApi } from '@/request/user.js'
import { mapState, mapActions } from 'vuex'
import projectConfig from '@/config/project.json'
import { languageMixin } from '@/utils/language-mixin.js'

export default {
	name: 'ShareGift',
	mixins: [languageMixin],
	data() {
		return {
			giftData: [],
			giftId: null,
			projectConfig,
			receiveGiftId: null
		}
	},
	computed: {
		...mapState('user',['userInfo', 'friendHomeMode'])
	},
	methods: {
		...mapActions('user', ['setUserInfo']),
		handleOpenInvitePopup() {
			this.$refs.invitePopup.open();
		},
		async handleOpenGiftPopup() {
			uni.$emit('show-loading')
			const res = await userApi.getNewbieGift()
			console.log('res', res)
			if (res && res.code === 200 && res.data) {
				this.giftData = res.data[0].items
				this.giftId = res.data[0].gift_id
			}
			uni.$emit('hide-loading')
			this.$refs.giftPopup.open();
		},
		closeInvitePopup() {
			this.$refs.invitePopup.close();
		},
		closeGiftPopup() {
			this.$refs.giftPopup.close();
		},
		async handleReceiveGift() {
			try {
				uni.$emit('show-loading')
				const res = await userApi.receiveNewbieGift(this.giftId)
				if (res && res.code === 200) {
					const userInfoRes = await userApi.getUserInfo()
					if (userInfoRes && userInfoRes.code === 200) {
						this.setUserInfo(userInfoRes.data)
						console.log('userInfoRes', userInfoRes)
						this.$refs.giftPopup.close();
					}
				}
			} catch (error) {
				console.error('Failed to receive newbie gift', error)
			} finally {
				uni.$emit('hide-loading')
			}
		},
		handleCopyLink() {
			uni.setClipboardData({
				data: projectConfig.domain + '/#/',
				success: () => {
					uni.showToast({ title: this.$t('messages.copy_success', 'Copy successfully'), icon: 'none' })
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.share-kf-wrap {
	position: absolute;
	top: 78px;
	right: 5px;
	z-index: 10;

	.sha-icon {
		width: 45px;
		height: 45px;
	}
}

.gift-box {
	position: absolute;
	top: 124px;
	right: 5px;
	z-index: 10;
	width: 59px;
	height: 53px;
	line-height: 78px;
	background: url(/static/img/gift.png) no-repeat;
	background-size: 100%;
	font-size: 12px;
	font-weight: 700;
	color: #b20f04;
}

.invite-popup-box {
	position: relative;
	background: url(/static/img/bg5.png) no-repeat;
	background-size: 100%;
	width: 267px;
	height: 332px;

	.close-img {
		position: absolute;
		width: 37px;
		height: 37px;
		right: -7px;
		top: 12px;
	}

	.title {
		color: #fef9e2;
		font-weight: 700;
		font-size: 17px;
		text-align: center;
	}

	.contents {
		height: 156px;
		padding: 15px 20px 0;

		.text {
			color: #885625;
			font-size: 15px;
			font-weight: 700;
			text-align: center;
			margin-bottom: 5px;
			margin-top: 8px;
		}

		.code-text {
			color: #5c8a50;
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 30px;
			text-align: center;
		}

		.code-box {
			width: 132px;
			height: 132px;
			background: url(/static/img/code-box.png) no-repeat;
			background-size: 100%;
			padding: 4px;
			box-sizing: border-box;
			margin: 0 auto;
			margin-bottom: 33px;

			.qr-code {
				width: 110px;
				height: 110px;
			}
		}

		.copy-btn {
			width: 135px;
			height: 41px;
			line-height: 34px;
			text-align: center;
			margin: 0 auto;
			background: url(/static/img/out-login.png) no-repeat;
			background-size: 100%;
			color: #fff;
			font-size: 14px;
			font-weight: 700;
		}
	}
}

.gift-popup-box {
	position: relative;
	background: url(/static/img/gift-bg.png) no-repeat;
	background-size: 100%;
	width: 272px;
	height: 297px;

	.title {
		width: 206px;
		height: 39px;
		margin: 85px auto 0;
	}

	.contents {
		width: 232px;
		height: 109px;
		margin: 0 auto;

		.gift-data {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			padding: 0 10px;

			.gift-box-item {
				width: 48px;
				height: 48px;
				background: #f3db9c;
				border-radius: 14px;
				margin: 0 7px;
				position: relative;
				align-items: center;
				justify-content: center;
				margin-bottom: 5px;
				left: 4px;

				.gift-img {
					width: 32px;
					height: 32px;
					margin-bottom: 5px;
				}

				.num {
					font-size: 13px;
					font-weight: 700;
					color: #f8fcff;
					position: absolute;
					bottom: 0;
					left: 30%;
				}
			}
		}
	}

	.gift-btn {
		width: 130px;
		height: 36px;
		line-height: 36px;
		background: url(/static/img/receiv-btn.png) no-repeat;
		background-size: 100% 100%;
		margin: 43px auto 0;
		font-size: 18px;
		font-weight: 700;
		text-align: center;
		color: #fff;
		text-shadow: 0 1px 2px rgba(214, 98, 5, .73);
	}

	.close {
		margin-top: 31px;
		width: 32px;
		height: 32px;
	}
}
</style>